// 1.导入Vue,安装vue-router的路由插件，
//还需要导入进来，然后再Vue中使用
import Vue from 'vue'
//2.导入vue-router
import VueRouter from 'vue-router'
// 3.在Vue中去使用VueRouter
Vue.use(VueRouter)
//导入登录组件

import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
//4.配置路由信息，也就是页面需要跳转的信息
// 组件之间的跳转  是有多个配置，主要存放在数组里面
let routes = [
    {
        path: '/', //页面上去输入locahost:8080/的时候页面需要跳转到首页
        redirect: '/home'//当页面方位localhost:8080/的时候需要重定向到Home.vue页面
    },
    {
        path: '/home',//前端的路径
        name: 'Home', //路由的标识
        component: () => import('@/pages/Home'),//跳转到Home组件
        meta: { show: true }
    },
    {
        path: '/login',//前端的路径
        name: 'Login', //路由的标识
        component: Login,//跳转到Login组件
        meta: { show: false }
    },
    {
        path: '/register',//前端的路径
        name: 'Register', //路由的标识
        component: Register,//跳转到Register组件
        meta: { show: false }
    },
    {
        path: '/search',//前端的路径
        name: 'Search', //路由的标识
        component: Search,//跳转到Search组件
        meta: { show: true }  //使用路由中的元信息来驱使我们底部Footer组件的影藏和显示
    }
]

// 5.实例化VuerRouter这个对象，用于存储路由信息
const router = new VueRouter({
    routes
})
// 6.对外暴露出这个router对象
export default router;
//上面的简写为：
// export default new VueRouter({
//     router
// }) 